<template>
  <view class="project-detail-container">
    <!-- 项目基本信息 -->
    <view class="info-card">
      <view class="card-header">
        <text class="project-name">{{project.projectName}}</text>
        <uni-tag :text="project.projectStatus  === 0 || project.projectStatus === '0' ? '未完成' : '已完成'" :type="getTagType(project.projectStatus)" size="small" />
      </view>
      
      <view class="info-section">
        <view class="section-title">基本信息</view>
        <view class="info-row">
          <text class="label">客户：</text>
          <text class="value">{{project.companyName}}</text>
        </view>
        <view class="info-row">
          <text class="label">开始时间：</text>
          <text class="value">{{project.createTime}}</text>
        </view>
        <view class="info-row">
          <text class="label">项目经理：</text>
          <text class="value">{{project.companyPerson}}</text>
        </view>
        <view class="info-row">
          <text class="label">联系电话：</text>
          <text class="value">{{project.companyPhone}}</text>
        </view>
      </view>
      
      <view class="info-section">
        <view class="section-title">项目描述</view>
        <view class="description">
          {{project.remark || '没有项目描述'}}
        </view>
      </view>

      <!-- 货物清单 -->
      <view class="info-section">
        <view class="section-title">货物清单</view>
        <view class="cargo-list">
          <!-- 表头 -->
          <view class="cargo-header">
            <text class="col">货物名称</text>
            <text class="col">货物数量</text>
            <text class="col">入库数量</text>
            <text class="col">出库数量</text>
            <text class="col">货物状态</text>
          </view>
          <!-- 表格内容 -->
          <view class="cargo-item" v-for="(item, index) in project.projectCargoList" :key="index">
            <text class="col">{{item.cargoName}}</text>
            <text class="col">{{item.cargoNum}}</text>
            <text class="col">{{item.cargoInputNum}}</text>
            <text class="col">{{item.cargoOutNum}}</text>
             <view class="col"> 
                <uni-tag :text="item.cargoStatus  === 0 || item.cargoStatus === '0' ? '未完成' : '已完成'" :type="getTagType(item.cargoStatus)" size="small" />
              </view>
            <!-- <text class="col">
             
            </text> -->
          </view>
          <!-- 无数据提示 -->
          <view class="empty-tip" v-if="!project.projectCargoList || project.projectCargoList.length === 0">
            暂无货物信息
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getProject } from "@/api/mes/project"
export default {
  data() {
    return {
      id: null,
      project: {
      }
    }
  },
  onLoad(options) {
    if (options.id) {
      this.id = options.id;
      // 实际应用中，这里应该根据ID从服务器获取项目详情
      this.fetchProjectDetail(this.id);
    }
  },
  methods: {
    getTagType(status) {
      // 处理数字状态值
      if (status === 0 || status === '0') {
        return 'warning' // 未完成状态使用警告色
      } else if (status === 1 || status === '1') {
        return 'success' // 已完成状态使用成功色
      }
      
      // 处理文本状态值（兼容）
      const typeMap = {
        '未完成': 'warning',
        '已完成': 'success',
        '已暂停': 'warning'
      }
      return typeMap[status] || 'default'
    },
    getCargoTagType(status) {
        if (status === '未完成') {
          return 'warning'
        } else if (status === '已完成') {
          return 'success'
        }
        return 'default'
      },
    fetchProjectDetail(id) {
      // console.log(id);
      getProject(id).then(res => {
        this.project = res.data;
      }).catch(err => {
        uni.showToast({
          title: '获取项目详情失败',
          icon: 'none'
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.project-detail-container {
  padding: 20rpx;
  background-color: #f8f8f8;
  
  .info-card, .progress-card, .tasks-card {
    background-color: #fff;
    border-radius: 10rpx;
    padding: 30rpx;
    margin-bottom: 20rpx;
  }
  
  .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30rpx;
    
    .project-name {
      font-size: 36rpx;
      font-weight: bold;
      color: #333;
    }
  }
  
  .section-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 20rpx;
    padding-bottom: 10rpx;
    border-bottom: 1px solid #eee;
  }
  
  .info-section {
    margin-bottom: 30rpx;
  }
  
  .info-row {
    display: flex;
    margin-bottom: 15rpx;
    
    .label {
      width: 160rpx;
      color: #666;
      font-size: 28rpx;
    }
    
    .value {
      color: #333;
      font-size: 28rpx;
      flex: 1;
    }
  }
  
  .description {
    font-size: 28rpx;
    color: #333;
    line-height: 1.6;
  }
  
  .progress-bar {
    margin-top: 20rpx;
    position: relative;
    
    .progress-text {
      position: absolute;
      right: 0;
      top: -40rpx;
      font-size: 28rpx;
      color: #007aff;
    }
  }
}
.cargo-list {
    .cargo-header {
      display: flex;
      background-color: #f8f8f8;
      padding: 20rpx 0;
      font-weight: bold;
      font-size: 26rpx;
      
      .col {
        flex: 1;
        text-align: center;
      }
    }
    
    .cargo-item {
      display: flex;
      padding: 20rpx 0;
      font-size: 26rpx;
      border-bottom: 1px solid #eee;
      
      .col {
        flex: 1;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
    
    .empty-tip {
      text-align: center;
      color: #999;
      padding: 30rpx 0;
      font-size: 26rpx;
    }
  }
</style>